<template>
  <div style="background: #EEEEEE">
    <div style="height: 46px">
      <van-nav-bar fixed style="height: 46px">
        <van-icon name="arrow-left" slot="left" size="28px" color="#101010" @click="onClickLeft"></van-icon>
        <span slot="title" style="font-size: 18px">开通会员</span>
        <router-link to="/agreement" slot="right" tag="span">服务协议</router-link>
      </van-nav-bar>
    </div>
    <div class="user" >
      <div class="user-img">
        <img src="" alt="" >
      </div>
      <span class="username">用户名</span>
    </div>
    <div class="pay-box">
      <div style="padding:0 20px;margin-bottom: 12px">
        <p>一次开通，享去那边精品<span style="float: right">联系客服</span></p>
      </div>
      <van-radio-group v-model="radio" >
          <van-cell-group>
            <van-cell clickable @click="radio = '1',buy()" class="pay">
            <p class="moth">
              {{m12.moth}}个月
              <span>月均{{m12.mMoney}}元</span>
              <van-radio class="chk" name="1"></van-radio>
              <em>￥{{m12.money}}</em></p>
           </van-cell>
            <van-cell clickable @click="radio = '2',buy()" class="pay">
              <p class="moth">
                {{m6.moth}}个月
                <span>月均{{m6.mMoney}}元</span>
                <van-radio class="chk" name="2"></van-radio>
                <em>￥{{m6.money}}</em></p>
            </van-cell>
            <van-cell clickable @click="radio = '3',buy()" class="pay">
              <p class="moth">
                {{m1.moth}}个月
                <span>月均{{m1.mMoney}}元</span>
                <van-radio class="chk" name="3"></van-radio>
                <em>￥{{m1.money}}</em></p>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      <div class="money-box">
        <p style="font-size: 16px;margin-bottom: 8px">总支付金额：￥{{money}}</p>
        <p style="color: #9f9f9f">一天只有一块钱，精品课程任你选</p>
        <van-button type="default" class="pay-btn">立即支付</van-button>
      </div>

    </div>
    <div class="vip-pri">
      <div>
        <h2 class="vip-plan-h2">更多会员特权</h2>
        <p class="vip-plan-p">事项特权，享尽富贵</p>
      </div>
      <div class="pri-box">
        <router-link to="" tag="div" class="pri-item">
          <img src="" alt="" class="pri-img">
          <p>专享课程每月</p>
        </router-link>
        <router-link to="" tag="div" class="pri-item">
          <img src="" alt="" class="pri-img">
          <p>全部训练计划</p>
        </router-link>
        <router-link to="" tag="div" class="pri-item">
          <img src="" alt="" class="pri-img">
          <p>专享课程每月</p>
        </router-link>
        <router-link to="" tag="div" class="pri-item">
          <img src="" alt="" class="pri-img">
          <p>全部训练计划</p>
        </router-link>
        <router-link to="" tag="div" class="pri-item">
          <img src="" alt="" class="pri-img">
          <p>专享课程每月</p>
        </router-link>
        <router-link to="" tag="div" class="pri-item">
          <img src="" alt="" class="pri-img">
          <p>全部训练计划</p>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'buyvip',
    data() {
      return {
        money:'388',
        radio: '1',
        m12:{
          num:1,
          moth:12,
          mMoney:32,
          money:388
        },
        m6:{
          num:1,
          moth:6,
          mMoney:32,
          money:288
        },
        m1:{
          num:3,
          moth:1,
          mMoney:32,
          money:88
        },
      }
    },
    methods:{
      onClickLeft(){
        this.$router.go(-1)
      },
      buy(){
        console.log(this.radio);
        if(this.radio==1){
          this.money=388
        }
        if(this.radio==2){
          this.money=288
        }
        if(this.radio==3){
          this.money=88
        }
        console.log(this.money);
      }
    }
  }
</script>
<style scoped="">
  div{background: white}
  .user{
    padding: 18px 0 18px 20px;border-bottom:1px solid #bbbbbb;border-top:1px solid #bbbbbb;overflow: hidden;
  }
  .user-img{
    height: 23px;width:23px;border: 1px solid black;float: left;border-radius: 50%;overflow: hidden;
  }
  .username{margin-left: 12px;display: block;float: left;line-height: 23px}

  .pay-box{padding: 30px 0 40px 0;margin-top: 20px}
  .pay{
    padding: 24px 19px 29px 20px;border-bottom: 1px solid #bbbbbb;display: flex;
  }

  .moth{float: left;width: 100%}
  .moth span{font-size: 12px;color: #b3b3b3;margin-left:16px}
  .moth em{font-size: 18px;float: right;margin-right: 16px}
  .chk{float: right}
  .money-box{
    padding:23px 0 40px 0;text-align: center;
  }
  .pay-btn{
    height: 50px;width: 200px;background: #EEEEEE;border: 1px solid #bbbbbb;margin-top: 33px;
  }
  .vip-pri{
    margin-top: 20px;padding: 50px 13px 59px 13px;background:#ffffff;text-align: center;
  }
  .pri-box{padding:40px 48px 0;display: flex;justify-content: space-between;flex-wrap:wrap}
  .pri-item{
    width: 100px;text-align: center;
  }
  .pri-img{
    height: 100px;width: 100px;border: 1px solid #EEEEEE;display: block;
  }
  .pri-item p {
    line-height: 60px;font-size: 14px;
  }
  .buy-box{
    height: 158px;width: 294px;border-radius: 20px;background: #C1C1C1;margin-top: 12px;text-align: center;
  }
  .vip-plan-h2{font-size:24px;margin-bottom: 21px ;font-weight: normal}
  .vip-plan-p {font-size: 18px;color: #a4a4a4}
  .pri-img:before,  .pri-img:after{content:" ";display:table}
  .pri-img:after{clear:both}
  .pri-item:before, .pri-item:after{content:" ";display:table}
  .pri-item:after{clear:both}
</style>
